<template>
  <div class="tab">
    <ul :style="{ width: options.length * 120 + 'px' }">
      <li
        v-for="(item, i) in options"
        :key="i"
        :class="{ on: item.code == value }"
        @click="change(item, i)"
      >
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <div class="line" :style="{ left: idx * 120 + 'px' }"></div>
  </div>
</template>

<script>
export default {
  name: "TabBase",
  props: {
    value: {
      type: [Number, String],
      require: true,
    },
    options: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      idx: 0,
    };
  },
  methods: {
    change(target, i) {
      this.idx = i;
      this.$emit("input", target.code);
      this.$emit("change", target.code);
    },
  },
};
</script>

<style lang="scss" scoped>
.tab {
  position: relative;

  .line {
    position: absolute;
    left: 0;
    top: 0;
    height: 56px;
    width: 120px;
    z-index: 1;

    border-radius: 56px;
    background-color: var(--border-color);
    transition: all 0.2s ease-in;
  }
  ul {
    height: 56px;
    width: 360px;
    display: flex;
    align-items: center;
    border: 3px solid var(--border-color);
    border-radius: 50px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;

    li {
      flex: 1;
      height: 50px;
      border-radius: 50px;

      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: #686869;
        font-size: 14px;
        font-family: "Roboto Bold";
        transition: all 0.2s ease-in;
      }

      &.on {
        span {
          color: var(--color);
        }
      }
    }
  }
}
</style>
